/*
 * @Author: Lin Hongwei
 * @Date: 2021-12-02 15:57:36
 * @LastEditTime: 2021-12-03 10:04:10
 * @LastEditors: Lin Hongwei
 * @email: 1365755396@qq.com
 * @CSDN: https://blog.csdn.net/weixin_45429409
 * @Description: 生产环境配置
 */

const BaseConfig = require("./webpack.config.js");
const {merge:WebpackMerge,mergeWithCustomize, unique} = require("webpack-merge");

const path = require("path");

//html打包插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//压缩css
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
//打包前清除已经打包的
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const ProdConfig = {
    mode: "production",
    //插件
    plugins: [
        new HtmlWebpackPlugin({
            //指定头部
            title: "Webpack搭建Vue项目",
            //指定模板文件
            template: __dirname + "/public/index.html",
            minify:{
                collapseWhitespace:true,//清除空格
                removeComments:true,//移除注释
                removeAttributeQuotes:true,//清除多余引号
            },
            //为所有js和css等静态资源路径上添加?hash值
            //有效解决缓存问题
            hash:true
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new CleanWebpackPlugin(), 
        
    ]
}


/**
 * mergeWithCustomize：实现自定义字段
 * ---------------
 * unique是一种用于在配置中强制唯一性的策略。
 * - 确保插件唯一性
 * - 并且是最后一个插件实例
 * 参数：1.查找的config字段，2.要去重的config下的字段，3.输出返回一个插件
 */
//下面实现用当前配置文件的HtmlWebpackPlugin
const webpackConfig = mergeWithCustomize({
    customizeArray: unique(
      "plugins",
      ["HtmlWebpackPlugin"],
      (plugin) => plugin.constructor && plugin.constructor.name
    ),
  })(
    BaseConfig,
    ProdConfig
  );

module.exports = webpackConfig
